<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
     header{ background-color: pink; }
     footer{ background-color: yellow;}
    </style> 
</head>
<body>
    <h1> 具名插槽 </h1>
    <div id="app">
        <base-layout>
           <template slot="header">
                <p>你好中国</p>
                <p>你好俄罗斯</p>
           </template>
           <h1> 这是默认插槽</h1>
           <template slot="footer">
            <p>你好小日本</p>
           </template>      
        </base-layout> 
    </div>
</body>
<script>
// 布局组件  --子
Vue.component('base-layout',{
    template:`<div>
                <header>
                    <slot name='header'></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name='footer'></slot>
                </footer>  
        </div>`
}); 

var vm = new Vue({
    el: "#app"
});
</script>
</html>